<template>
	<view class="">
		<!-- 导航栏顶部 -->
		<view class="nav">
			<u-navbar title-color="#fff" back-icon-color="#ffffff" :is-back="true" :background="background"
				:back-text-style="{color: '#fff'}" title="实名认证" back-text="返回" />

		</view>
		<view class="ui-all">
			<view class="ui-list">
				<text>真实姓名：</text>
				<input v-model="username" type="text" :placeholder="value" placeholder-class="place" />
			</view>
			<view class="ui-list">
				<text>身份证号：</text>
				<input v-model="idCard" type="text" :placeholder="value" 
					placeholder-class="place" />
			</view>
			<button v-if="idNumber == null" class="save" @click="attestation()">认证</button>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		attestation
	} from '../../api/login/user.js'
	export default {
	
		data() {
			return {
				// 背景
				background: {
					backgroundColor: '#f8f8f8',

					// 导航栏背景图
					//background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
					// 还可以设置背景图size属性
					// backgroundSize: 'cover',

					// 渐变色
					backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				value: '请填写',
				idCard: '',
				username: '',
			}
		},
		computed: {
			...mapGetters([
				'userID',
				'name',
				'idNumber',
			])
		},
		created() {
			this.idCard = this.idNumber;
			this.username = this.name;
		},
		methods: {
			attestation() {
				if (this.idCard.length != 18) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '身份证不正确'
					});
					return false;
				}
				let data = {
					name: this.username,
					idNumber: this.idCard,
					userId:this.userID,
				}
				console.log(data)
				attestation(data).then(res => {
					console.log(JSON.stringify(res))
					if (res.header.code == 200) {
						uni.showToast({
							icon: 'success',
							title: '认证成功',
							duration: 2000
						});
						this.$store.dispatch("userInfo/SETUSERINFO",data)
						uni.reLaunch({
							url: '../mine/index'
						});
					}else{
						uni.showToast({
							icon: 'none',
							title: res.body,
							duration: 2000
						});
					}
				})
			}

		}
	}
</script>

<style lang="less">
	.container {
		display: block;
	}

	.ui-all {
		padding: 20rpx 40rpx;

		.avatar {
			width: 100%;
			text-align: left;
			padding: 20rpx 0;
			border-bottom: solid 1px #f2f2f2;
			position: relative;

			.imgAvatar {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				display: inline-block;
				vertical-align: middle;
				overflow: hidden;

				.iavatar {
					width: 100%;
					height: 100%;
					display: block;
				}
			}

			text {
				display: inline-block;
				vertical-align: middle;
				color: #8e8e93;
				font-size: 28rpx;
				margin-left: 40rpx;
			}

			&:after {
				content: ' ';
				width: 20rpx;
				height: 20rpx;
				border-top: solid 1px #030303;
				border-right: solid 1px #030303;
				transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				/* IE 9 */
				-moz-transform: rotate(45deg);
				/* Firefox */
				-webkit-transform: rotate(45deg);
				/* Safari 和 Chrome */
				-o-transform: rotate(45deg);
				position: absolute;
				top: 85rpx;
				right: 0;
			}
		}

		.ui-list {
			width: 100%;
			text-align: left;
			padding: 20rpx 0;
			border-bottom: solid 1px #f2f2f2;
			position: relative;

			text {
				color: #4a4a4a;
				font-size: 28rpx;
				display: inline-block;
				vertical-align: middle;
				min-width: 150rpx;
			}

			input {
				color: #030303;
				font-size: 30rpx;
				display: inline-block;
				vertical-align: middle;
			}

			button {
				color: #030303;
				font-size: 30rpx;
				display: inline-block;
				vertical-align: middle;
				background: none;
				margin: 0;
				padding: 0;

				&::after {
					display: none;
				}
			}

			picker {
				width: 90%;
				color: #030303;
				font-size: 30rpx;
				display: inline-block;
				vertical-align: middle;
				position: absolute;
				top: 30rpx;
				left: 150rpx;
			}

			textarea {
				color: #030303;
				font-size: 30rpx;
				vertical-align: middle;
				height: 150rpx;
				width: 100%;
				margin-top: 50rpx;
			}

			.place {
				color: #999999;
				font-size: 28rpx;
			}
		}

		.right:after {
			content: ' ';
			width: 20rpx;
			height: 20rpx;
			border-top: solid 1px #030303;
			border-right: solid 1px #030303;
			transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			/* IE 9 */
			-moz-transform: rotate(45deg);
			/* Firefox */
			-webkit-transform: rotate(45deg);
			/* Safari 和 Chrome */
			-o-transform: rotate(45deg);
			position: absolute;
			top: 40rpx;
			right: 0;
		}

		.save {
			background: #030303;
			border: none;
			color: #ffffff;
			margin-top: 40rpx;
			font-size: 28rpx;
		}
	}
</style>
